<template>
  <el-select v-model="value"
      :placeholder="'请选择'"
      class="m-2"
      size="small"
      @change="selectChange">
    <el-option
      v-for="items in selectOptions"
      :key="items.dictValue"
      :label="items.dictLabel"
      :value="items.dictLabel"
    />
  </el-select>
</template>

<script>
import * as API from '../../api/resourceManagement/index.js'
export default {
  props: {
    selectDictType: {
      type: Array,
      default: () => []
    },
    formInline: {
      type: Object,
      default: () => {}
    },
    queryDes: {
      type: String,
      default: ''
    },
    queryField: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: '',
      selectOptions: []
    }
  },
  watch: {
    selectDictType: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          newVal.forEach(item => {
            if (item.key === this.queryDes) {
              this.getSelect(item.value)
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    selectChange(val) {
      this.$emit('selectChanges', { value: val, id: this.queryField })
    },
    getSelect(val) {
      API.dictDataTtpe(val).then(res => {
        if (res.code === 200) {
          this.selectOptions = res.data
        }
      })
    },
    reset() {
      this.value = ''
    }
  }
}
</script>

<style>

</style>
